<template>
	<view>
		<cu-custom :bgImage="bgData" style="height: 200upx;" :isBack="true"><block slot="backText">返回</block>
			<block slot="content">模块编辑</block>
		</cu-custom>
		<view class="cu-list menu sm-border card-menu margin-top margin-bottom">
			<view class="cu-item" style="height: 90px; background-size: 100% 100%; background-repeat: no-repeat; -moz-background-size:100% 100%;"  :style="[{backgroundImage:'url('+imgData+')'}]">
				<view class="content">
					<view class="flex flex-wrap" >
						<text style="color: #fff;font-size: 40upx;font-weight: 300;transform: skew(-10deg, 0deg);position: relative;text-shadow: 0px 0px 6upx rgba(0, 0, 0, 0.3)">{{project.name}}</text>
						<view class="basis-xl">     </view>
						<text class="childTitle">共{{projectNum}}个模块</text>
					</view>
					
				</view>
				<view class="margin-tb-sm text-center" @click="editManage(project.id)">
					<button class="cu-btn round bg-blue shadow">编辑</button>
				</view>
			
			</view>
		</view>
		
		<view class="nav-list margin-top-xl">
			<view class="nav-li" :class="'bg-'+item.color" v-for="(item,index) in childProjectList" :key="index" @tap="editChildProject(item.id)">
				<view class="nav-title">{{item.name}}</view>
				<view class="nav-name">{{item.enName}}</view>
				<text :class="'cuIcon-' + item.icon"></text>
				<view class="nav-name">¥{{item.price}}</view>
			</view>
		</view>
		
		<view class="padding-xl" @click="addChildProject">
			<button class="cu-btn block line-green lg">
				<text class="cuIcon-add"></text> 新增子模块
				</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				elements: [{
						id: 1,
						title: '小品',
						name: 'sketches',
						color: 'purple',
						cuIcon: 'vipcard',
						price: '￥2000'
					},
					{
						title: '情景剧 ',
						name: 'sitcom',
						color: 'olive',
						cuIcon: 'formfill',
						price: '￥2000'
					},
					{
						title: '话剧',
						name: 'drama',
						color: 'pink',
						cuIcon: 'list',
						price: '￥2000'
					},
					{
						title: '演讲',
						name: 'lecture',
						color: 'brown',
						cuIcon: 'newsfill',
						price: '￥2000'
					},
					{
						title: '舞台剧',
						name: 'living theatre',
						color: 'red',
						cuIcon: 'formfill',
						price: '￥2000'
					},
					/* {
						title: '舞蹈',
						name: 'timeline',
						color: 'orange',
						cuIcon: 'timefill'
					},*/
					{
						title: '聊天',
						name: 'chat',
						color: 'green',
						cuIcon: 'messagefill'
					},
					{
						title: '轮播',
						name: 'swiper',
						color: 'olive',
						cuIcon: 'album'
					},
					{
						title: '模态框',
						name: 'modal',
						color: 'grey',
						cuIcon: 'squarecheckfill'
					}, 
					{
						title: '舞蹈',
						name: 'dance',
						color: 'cyan',
						cuIcon: 'roundcheckfill',
						price: '￥2000'
					}
				],
				projectId: '',
				projectNum: 0,
				childProjectList: [],
				project: {},
				bgData: this.imgPath+'back.png',
				imgData: ''
			}
		},
		onLoad(e) {
			/* if (e.id === null || e.id==='' || e.id===undefined) {
				
			} */
			this.gProjectId = e.id
			this.projectId = e.id
			this.showProject(e.id)
			this.showChildProject(e.id)
		},
		onShow() {
			this.showProject(this.gProjectId)
			this.showChildProject(this.gProjectId)
		},
		methods: {
			editManage(id) {
				uni.navigateTo({
					url: "edit_manage?id="+id
				})
			},
			showProject(id) {
				uni.request({
					url: this.serverPath + 'project/postProjectById',
					method: 'POST',
					header:{
						'Content-type':'application/x-www-form-urlencoded'
					},
					data: {
						id: id
					},
					success:(res)=> {
						this.project = res.data.data
						this.imgData = this.project.img
					}
				})
			},
			showChildProject(id) {
				uni.request({
					url: this.serverPath + 'project/postChildProjectListByPid',
					method: 'POST',
					header:{
						'Content-type':'application/x-www-form-urlencoded'
					},
					data: {
						pid: id
					},
					success:(res)=> {
						this.childProjectList = res.data.data
						this.projectNum = this.childProjectList.length
					}
				})
			},
			addChildProject() {
				uni.navigateTo({
					url: "edit_project?pid="+this.projectId
				})
			},
			editChildProject(id) {
				uni.navigateTo({
					url: "edit_project?id="+id
				})
			}
		}
	}
</script>

<style>
	.cardTitle {
		color: #fff;
		font-size: 40upx;
		font-weight: 300;
		transform: skew(-10deg, 0deg);
		position: relative;
		text-shadow: 0px 0px 6upx rgba(0, 0, 0, 0.3)
	}
	.childTitle {
		color: #fff;
		font-size: 28upx;
		font-weight: 200;
		transform: skew(-10deg, 0deg);
		position: relative;
		text-shadow: 0px 0px 6upx rgba(0, 0, 0, 0.3)
	}

</style>
